/**
 * Created by xudesong on 2019/1/14.
 */

<template>
    <div class="block">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="用户管理" name="first">
                <search
                ref="search"
                :search-data="searchParam"
                :label-width="'100px'"
                />
                <SearchForm
                ref="searchForm"
                :formData="formData"
                />
             <el-button @click="getSearchForm" >确定</el-button>
            </el-tab-pane>
            <el-tab-pane label="配置管理" name="second">
                <div>
                    <p>
                        <router-link to="/home/home11">home11首页的子导航</router-link>
                        <router-link to="/home/home22">home22首页的子导航</router-link>
                    </p>
                    <router-view></router-view>
                </div>
            </el-tab-pane>
            <el-tab-pane label="角色管理" name="third">
                <Son1 :age="16" v-model="mycheck"></Son1>
                <Son2></Son2>
            </el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth">定时任务11补偿</el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts">
    import {Vue,Component,Inject, Provide, Prop, Model, Watch, Emit, Mixins } from 'vue-property-decorator'
    import Son1 from '../Son1.vue'
    import Son2 from '../Son2.vue'
    import search from '../../components/Search/index.vue'
    import SearchForm from '../../components/SearchForm/index.vue'
    import {GlobalDefinitions} from "../../GlobalDefinitions";
    import {autoRefreshTokenFetch} from "../../utils/autoRefreshTokenFetch";
    import {mapState,mapGetters,mapActions} from 'vuex';
    @Component({
        props: [],
        components:{ Son1,Son2,search,SearchForm },
        computed:{
            ...mapGetters('homeVuex',{ //用mapGetters来获取collection.js里面的getters
                    taskByUnit:'getTaskByUnit',
                     showFooter:'isShow',
                })
        },
         data() {
            return {
            activeName:"first",
            token:"",
            isShow:false,
        formData:[{
            name:'Input',//所用组件
            type:'text',// 组件type
            field:'name',// modal 绑定的值
            placeholder: '默认值 name ',// 默认值
            label: "姓名",
              defaultStyle:{
                 width: '150px'
            },
            rule: [
            { required: true, message: '请输入油站名称', trigger: 'blur' },
            { max: 50, message: '名称50个字符以内', trigger: 'blur' }
            ],
        },
        {
            name:'Input',//所用组件
            type:'textarea',// 组件type
            field:'remark',// modal 绑定的值
            placeholder: '默认值 remark ',// 默认值
            label: "备注",
            defaultStyle:{
                 width: '150px'
            }
        },
        {
            name:'Select',//所用组件
            field:'selectItem',// modal 绑定的值
            placeholder: '请选择 selectItem ',// 默认值
            label: "选择框",
             defaultStyle:{
                 width: '150px'
            },
            options: [{
                value: '选项1',
                label: '黄金糕'
                }, {
                value: '选项2',
                label: '双皮奶',
                disabled: true
                }, {
                value: '选项3',
                label: '蚵仔煎'
                }, {
                value: '选项4',
                label: '龙须面'
                }, {
                value: '选项5',
                label: '北京烤鸭'
                }],
            },
        ],
            searchParam: [
                {
                field: "createTime",
                name: "DatePicker",
                type: "monthrange",
                size: "",
                label: "日期",
                placeholder: "日期",
                defaultValue: [],
                rangeSeparator: "至",
                startPlaceholder: "开始月份",
                endPlaceholder: "结束月份",
                valueFormat: "yyyy-MM"
                },
                {
                field: "hzCompanyCode",
                name: "Select",
                label: "货主公司",
                defaultValue: "",
                filterable: true,
                options: [{ label: "全部", value: "" }]
                },
                {
                field: "cysCompanyCode",
                name: "Select",
                label: "承运公司",
                defaultValue: "",
                filterable: true,
                options: [{ label: "全部", value: "" }]
                }
            ],} 
        },
        watch: {
            taskByUnit(val) {
                console.log("taskByUnit:watch  ",val)
            }
        },
         methods: {
            handleClick(tab, event) {
                 console.log("activeName:  ",tab, event);
            },
            getSearchForm(){
                // this.$refs.coreTableOwner.$refs.coreTable
                (this.$refs.searchForm as any).$refs.form.validate(async valid => {
                    if (valid) {
                    }
                });
                console.log("this.searchForm form ", (this.$refs.searchForm as any).$refs.form);
                console.log("this.searchForm formModel ", (this.$refs.searchForm as any).formModel);
            }
         },
        mounted () {},
        created () {}
    })
    export default class DemoHome extends Vue{
        private mycheck:boolean = false;
    }
</script>
<style scoped lang="scss">
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    #home{
        width: 100%;
        height: 500px;
        background-color: khaki;
    }
</style>